<!--
 * @Description:订单详情页面
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-10 15:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-29 18:14:35
-->
<template>
	<view class="order-details-container">
		<c-layout>
			<c-navigation-bar @backEvent="backEvent" :title="goodStatus " slot="head"
				navbarBgColor="#F7F8FA"></c-navigation-bar>
			<view class="container-box">
				<view :class="`order-box ${currentOrderDetailsType != '1' && pageType !== 'product' ? 'is-shipped' : ''}`">
					<view class="" style="margin: 0 0 30rpx 0" v-if="pageType != 'product'">
						<!-- <view class="goodStatus-box">
							{{ goodStatus }}
						</view> -->
						<view class="goodStatus-msg"
							v-if="orderDetails.orderInfo.payStatus == 0 && orderDetails.orderInfo.orderStatus != -1">
							<view class="">{{$t('orderDetails.orderTimeLast')}}</view>
							<u-count-down bg-color="rgba(255,255,255,0)" font-size="28" :timestamp="countTime" :show-days="false"
								:show-hours="false"></u-count-down>
							<view class="">{{$t('orderDetails.orderTimeFirst')}}</view>
						</view>
						<!-- <view class="" style="display: flex; align-items: center;justify-content: center;">
							<view class="" style="display: flex; background: #2934d0;align-items: center;justify-content: center;width: 120rpx;padding: 10rpx;border-radius: 16rpx;" @click="runPayment">
								<view class="bottom-text" style="color: #fff; font-size: 26rpx">{{ $t('order.immediatePayment') }}</view>
							</view>
						</view> -->

					</view>
					<!-- 已取消 -->
					<!-- <view class="address-info" v-if="orderDetails.orderInfo.orderStatus == -1" style="height: 120rpx">
						<uni-icons type="location-filled" size="38" color="#FC3D5C"></uni-icons>
						<view class="info">{{ $t('orderDetails.noDelivery') }}</view>
					</view> -->
					<!-- 地址信息 -->
					<view class="" style="margin: 0">
						<view class="address-info"
							v-if="(addressList.length > 0 && chooseAddress == true) || orderAddress || defaulAddress">
							<!-- <uni-icons type="location-filled" size="38" color="#FC3D5C"></uni-icons> -->
							<view class="info">
								<view class="" style="display: flex;justify-content: space-between;align-items: center;">
									<view class="name" style="width: 50%;">
										{{ $t('addAddress.fullname') }}:　{{ defaulAddress.userName || defaulAddress.consigUser }}
									</view>
									<view class="btn-area" style="margin-right: 20rpx;">
										<template v-if="
												currentOrderDetailsType == '1' ||
												(orderDetails.orderInfo.payStatus == 0 && orderDetails.orderInfo.orderStatus != -1) ||
												pageType == 'product'
											">
											<!-- <button @click="changeAddressClick" type="default">{{ $t('orderDetails.change') }}</button> -->
											<!-- <uni-icons type="forward" size="30" color="#B6B6B6" @click="changeAddressClick"></uni-icons> -->
											<view class=""
												style="border: 1px solid #DEDEDE;padding:10rpx 20rpx;border-radius: 36rpx;color: #686872;font-size: 24rpx;"
												@click="changeAddressClick">
												{{ $t('order.changeAddress') }}
											</view>
										</template>
										<template v-else-if="orderDetails.orderInfo.orderStatus == 0">
											<!-- <button @click="$u.route('/pages/addressManage/addressManage')" type="default">Edit
									      Address
									    </button> -->
										</template>
									</view>
								</view>
								<view class="dressMsg">{{ defaulAddress.countryName }}　{{ defaulAddress.city }}</view>
								<view class="dressMsg">{{ $t('addAddress.address') }}:　{{ defaulAddress.address }},</view>
								<view class="dressMsg">{{ $t('addAddress.postcode') }}:　{{ defaulAddress.postalCode }}</view>
								<view class="dressMsg">
									{{ $t('addAddress.mobile') }}:　{{`+${defaulAddress.areaCode} - ${defaulAddress.mobile} `}}</view>
							</view>
							<!-- 地址订单按钮区域 根据类型判断展示不同的按钮元素 -->

						</view>
						<!-- 有收货地址 -->
						<view class="address-info"
							v-if="addressList.length > 0 && chooseAddress == false && !orderAddress && !defaulAddress"
							style="height: 120rpx">
							<!-- <uni-icons type="location-filled" size="38" color="#FC3D5C"></uni-icons> -->

							<view class="">{{ $t('orderDetails.delivery') }}</view>
							<!-- 地址订单按钮区域 根据类型判断展示不同的按钮元素 -->
							<view class="btn-area" @click="changeAddressClick">
								<template>
									<uni-icons type="forward" size="30" color="#B6B6B6"></uni-icons>
									<!-- <view class="" style="border: 1px solid #DEDEDE;padding:10rpx 20rpx;border-radius: 36rpx;color: #686872;font-size: 24rpx;" @click="changeAddressClick">
											{{ $t('order.changeAddress') }}
										</view> -->
								</template>
							</view>


						</view>
						<!-- 无收货地址 -->
						<view class="address-info"
							v-if="addressList.length == 0 && !orderAddress && !defaulAddress && orderDetails.orderInfo.orderStatus != -1"
							style="height: 120rpx">
							<!-- <uni-icons type="location-filled" size="38" color="#FC3D5C"></uni-icons> -->
							<view class="info">{{ $t('orderDetails.addShipping') }}</view>
							<!-- 地址订单按钮区域 根据类型判断展示不同的按钮元素 -->
							<view class="btn-area" @click="$u.route('/pages/addAddress/addAddress')">
								<template>
									<view class="" style="font-size: 28rpx;min-width: 60rpx;margin-right: 20rpx;">{{ $t('orderDetails.addNew') }}</view>
									<uni-icons type="forward" size="30" color="#B6B6B6"></uni-icons>
								</template>
							</view>
						</view>
					</view>

					<view class="payDetail">
						<view class="productBox-intro" style="display: flex;justify-content:start;padding-top: 30rpx ;">
							<view class="" style=" color: #1B1D29;font-size: 28rpx;">{{ $t('order.orderNumber') }}:</view>
							<view class="tittle-box" style=" color: #1B1D29;font-size: 28rpx;">
								{{ orderDetails.orderInfo.orderNo}}
							</view>
						</view>
						<!-- 商品列表 -->
						<view class="goods-list">
							<view class="goods-item" v-for="(item, index) in orderDetails.orderSkus" :key="index"
								v-if="orderDetails.orderInfo.orderStatus != 2 && orderDetails.orderInfo.orderStatus != 3">
								<orderCard :showBtn="true" @click="cardClick(item)" :orderDetails="item" :followUrlData="followUrlData"
									:icon="currentOrderDetailsType == 1 || pageType == 'product'" @viewLogistics="viewLogistics">
								</orderCard>
							</view>
							<view class="goods-item" v-for="(item, index) in orderDetails.orderSkus" :key="index"
								v-if="orderDetails.orderInfo.orderStatus == 2">
								<orderCard :orderDetails="item" :followUrlData="followUrlData" :showBtn="true"
									:icon="orderDetails.orderInfo.orderStatus == 0" @viewLogistics="viewLogistics" @click="cardClick">
								</orderCard>
							</view>
							<view class="goods-item" v-for="(item, index) in orderDetails.orderSkus" :key="index"
								v-if="orderDetails.orderInfo.orderStatus == 3">
								<orderCard :showBtn="true" :orderDetails="item" :followUrlData="followUrlData"
									:icon="orderDetails.orderInfo.orderStatus == 0" @viewLogistics="viewLogistics" @click="cardClick">
								</orderCard>
							</view>
						</view>
						<!-- 价格详情 -->
						<view class="price-details">
							<view class="price-details-title">
								<h2>
									{{ $t('orderDetails.priceDetails') }} <text
										style="color: #b6b6b6;font-size: 12px;">({{ $t('orderDetails.priceInfo') }})</text>

								</h2>
						
							</view>
							<view class="price-list">
								<ul>
									<li>
										<text>{{ $t('order.orderNumber') }}</text>
										<view class="" style="display: flex;">
											<text style="color: #616161">{{ orderDetails.orderInfo.orderNo }}</text>
											<view class="" style="color:#2934D0;margin-left: 20rpx;" @click="copyText">
												{{ $t('orderDetails.copy') }}
											</view>
										</view>

									</li>
									<li v-if="followUrlData.createTime">
										<text>{{ $t('orderDetails.creatTime') }}</text>

										{{publicJS.timeZoneSwitching(Number(orderDetails.orderInfo.createTime))}}
									</li>
									<li>
										<text>{{ $t('orderDetails.totalMoney') }}</text>
										<text style="color:#616161">$ {{ Number(orderDetails.orderInfo.moneys).toFixed(2) }}</text>
									</li>
									<!-- <li>
										<text>Discount</text>
										<text style="color: #F26163;">-${{ orderDetails.moneys }}
										</text>
									</li> -->
									<!-- <li>
										<text>{{ $t('orderDetails.totalQuantity') }}</text>
										<text>x {{ followUrlData.num }}</text>
									</li> -->

									<li>
										<text>{{ $t('orderDetails.shippingCharges') }}</text>
										<text style="color:#616161">$ {{ followUrlData.totalPostage }}</text>
									</li>
								</ul>
							</view>
							<view class="price-result">
								<text>{{ $t('orderDetails.youPay') }}</text>
								<text style="color: #f26163">${{ followUrlData.payMoney }}</text>
							</view>
						</view>
					</view>

					<!-- 推荐商品 -->
					<view class="goods-box">
						<view class="title">
							{{ $t('product.recommendCommodities') }}
						</view>
						<view class="reviews-main">
							<productCard :details="{ ...item, h: 280 }" v-for="item in goodList" :key="item.id"
								@click="goProductDetail(item)"></productCard>
						</view>
					</view>
				</view>

				<!-- 修改地址信息弹窗 -->
				<u-popup safe-area-inset-bottom border-radius="60" class="change-order-address"
					v-model="changeOrderAddressPopShow" mode="bottom">
					<view class="popup-main">
						<view class="header">
							<text>{{ $t('orderDetails.changeAddress') }}</text>
							<u-icon @click="popStatusChange(false)" name="close"></u-icon>
						</view>
						<!-- <view class="" style="width: 100%; display: flex; justify-content: end; align-items: center; margin-top: 20rpx">
							<view class="addAddress" style="display: flex; justify-content: end; align-items: center" @click="$u.route('/pages/addAddress/addAddress')">
								<u-icon size="20" name="plus" color="#FC3D5C"></u-icon>
								<view class="" style="color: #fc3d5c; font-size: 30rpx">
									{{ $t('orderDetails.addNew') }}
								</view>
							</view>
						</view> -->
						<!-- 选择地址 -->
						<view class="check-address">
							<view class="address-item" v-for="item in addressList" :key="item.id">
								<view @click="currentCheckChange(item)"
									:class="`check-icon ${currentAddress.id === item.id ? 'is-checked' : ''}`"></view>
								<view class="check-text" @click="currentCheckChange(item)">
									<view class="user-name">
										{{ item.userName }}
									</view>
									<view class="address">
										{{ item.address }}
									</view>
								</view>
							</view>
						</view>
						<view class="" style="display: flex; justify-content: space-around">
							<button style="color: #ffffff; background-color: #fc3d5c; width: 40%" type="default"
								@click="$u.route('/pages/addAddress/addAddress')">
								{{ $t('orderDetails.addNew') }}
							</button>
							<button style="width: 40%" type="default" @click="changeAddress">{{ $t('orderDetails.confirm') }}</button>
						</view>
					</view>
				</u-popup>
				<inputPayPassword @finish="payPwdPopFinish" :payPwdPopShow.sync="payPwdPopShow"
					:amount="publicJS.toFixed(followUrlData.payMoney)" :maxlength="6" @close="handleclose">
					<view class="countDown">
						<view class="">
							{{ $t('orderDetails.within') }}
						</view>
						<u-count-down @end="timeOut" font-size="30" color="#FFFFFF" bg-color="#2934D0" :timestamp="countTime"
							:show-days="false" :show-hours="false"></u-count-down>
						<view class="">
							{{ $t('orderDetails.please') }}
						</view>
					</view>
				</inputPayPassword>
			</view>

			<!-- 取消支付后弹出 -->
			<u-modal :show-title="false" v-model="showModel" show-cancel-button :content="$t('orderDetails.waive')"
				:confirm-text="$t('orderDetails.continue')" :cancel-text="$t('orderDetails.abandon')" cancel-color="#2934D0"
				confirm-color="#2934D0" @cancel="cancelPay"></u-modal>

			<!-- 底部支付栏仅在待支付状态存在 -->
			<!-- v-if="showPay || (orderDetails.orderInfo.payStatus == 0 && orderDetails.orderInfo.orderStatus != -1)" -->
			<view class="footer-pay"
				v-if="showPay || orderDetails.orderInfo.payStatus == 0 || orderDetails.orderInfo.orderStatus == -1">
				<!-- 直接购买 -->
				<view class="btnType" v-if="pageType == 'product'">
					<view class="total">
						<view>{{ $t('orderDetails.Total') }} ({{ orderDetails.orderDetails.length }} {{ $t('orderDetails.item') }}) :</view>
						<view>${{ followUrlData.payMoney }}</view>
					</view>
					<view class="bottom-btn" v-if="!payPwdPopShow" style="display: flex; background: #2934d0" @click="runPayment">
						<u-loading size="36" :show="isloading" mode="flower" style="margin-right: 10rpx;"></u-loading>
						<view class="bottom-text" style="color: #fff; font-size: 32rpx">{{ $t('order.immediatePayment') }}</view>
					</view>
				</view>

				<!-- 待支付 -->
				<view class="btnType1"
					v-if="pageType != 'product' && orderDetails.orderInfo.payStatus == 0 && orderDetails.orderInfo.orderStatus != -1">
					<!-- 取消订单 -->
					<view class="bottom-cancle" style="display: flex; border: 1px solid #b6b6b6" @click="goCancleOrder()">
						<view class="bottom-text">{{ $t('order.cancelOrder') }}</view>
					</view>
					<!-- 倒计时 -->
					<view class="bottom-btn" v-if="pageType != 'product'" style="display: flex; background: #2934d0"
						@click="runPayment">
						<u-loading size="36" :show="isloading" mode="flower" style="margin-right: 10rpx;"></u-loading>
						<view class="bottom-text" style="color: #fff; font-size: 32rpx">{{ $t('order.immediatePayment') }}</view>
						<view class="bottom-text" style="color: #fff; margin-left: 10rpx">
							<u-count-down bg-color="rgba(255,255,255,0)" separator-color="#FFFFFF" font-size="32" color="#FFFFFF"
								:timestamp="countTime" :show-days="false" :show-hours="false"></u-count-down>
						</view>
					</view>
				</view>

				<!-- 已取消和其他状态 -->
				<view class="btnType1"
					v-if="pageType != 'product' && (orderDetails.orderInfo.payStatus != 0 || orderDetails.orderInfo.orderStatus == -1)">

					<!-- 删除订单 -->
					<!-- <view class="bottom-cancle" v-if="orderDetails.orderInfo.orderStatus == 2 || orderDetails.orderInfo.orderStatus == -1" style="display: flex; border: 1px solid #b6b6b6" @click="deleteShow=true" > -->
					<view class="bottom-cancle" style="display: flex; border: 1px solid #b6b6b6" @click="deleteOrder">
						<u-loading :show="isloading1" mode="flower" style="margin-right: 10rpx;"></u-loading>
						<view class="bottom-text">{{ $t('order.deleteOrder') }}</view>
					</view>
					<!-- 加入购物车 -->
					<view class="bottom-cancle" v-if="pageType != 'product'"
						style="display: flex; background-color: #2934d0;border: 1px solid #2934d0;" @click="addCar">
						<u-loading :show="isloading" mode="flower" style="margin-right: 10rpx;"></u-loading>
						<view class="bottom-text" style="color: #DEDEDE; font-size: 32rpx">{{ $t('order.joinCart') }}</view>
					</view>
				</view>

			</view>
			<!-- 确认删除 -->
			<u-modal v-model="deleteShow" :show-title='false' @cancel="cancle" @confirm="confirm"
				:confirm-text="$t('system.affirm')" :cancel-text="$t('system.cancel')" show-cancel-button
				:content="$t('order.deleteOrder') " ref="uModal" :async-close="true"></u-modal>
			<!--        弹框-->
			<promptDialog ref="promptDialogs_cs"></promptDialog>
		</c-layout>
	</view>
</template>

<script>
	import { math } from '@/common/math';
	import inputPayPassword from '@/components/inputPayPassword/inputPayPassword.vue'
	export default {
		data() {
			return {
				isloading: false,
				isloading1: false,
				isloading: false,
				// 订单状态
				goodStatus: null,
				//是否显示付款按钮
				showPay: false,
				//取消付款
				showModel: false,
				//订单创建时间
				createTime: null,
				//倒计时时间
				countTime: 1800,
				goodList: [],
				math,
				// 订单详情id
				orderDetailsId: '',
				// 订单详情
				orderDetails: {
					orderInfo: {
						payStatus: 1,
						orderStatus: 2
					}
				},
				// 地址列表
				addressList: [],
				// 修改订单地址
				changeOrderAddressPopShow: false,
				// 当前选中地址id
				currentAddress: {},
				// 当前订单详情类型 0 待支付 1已支付 2 已完成
				currentOrderDetailsType: '',
				// 付款密码弹出层
				payPwdPopShow: false,
				//分页
				paging: {
					pageSize: 20,
					pageNum: 1
				},
				//收获地址
				defaulAddress: null,
				followUrlData: {},
				//是否选择地址
				chooseAddress: false,
				//是否有地址
				orderAddress: false,
				//上个页面类型 1商品详情  0 我的订单
				pageType: null,


				// 确认删除弹窗
				deleteShow: false,
			};
		},

		onLoad(data) {
			console.log('pppppppppppp', data);
			// console.log(111, this.vuex_shoping_cart, this.vuex_shoping_cartList);
			this.pageType = data.type;
			this.getOrderInfo(data)



			this.followUrlData = data;
			this.$set(this.followUrlData, 'payMoney', (Number(this.followUrlData.moneys) + Number(this.followUrlData
				.totalPostage)).toFixed(2));

			this.createTime = data.createTime || this.vuex_shoping_cartList.orderInfo.createTime;
			this.changeTime();

			if (data.orderId) {
				this.orderDetailsId = data.orderId;
				this.getOrderDetailsAjax();
			}

			if (data.type != 'product') {
				this.currentOrderDetailsType = data.type;

				this.goodStatus = data.goodStatus;
				// console.log(3333,this.currentOrderDetailsType);
				if (data.type == 1 || data.type == 'product') {
					this.showPay = true;
				}
			}
			// this.defaulAddress = this.vuex_address_info;
			// console.log(this.defaulAddress);
			this.getAddressList();
			//获取推荐
			this.$u.get(`/app/shopGoodsInfo/productRecommended`).then((res) => {
				this.goodList = res.data;
			});

		},

		onShow() {
			this.getOrderInfo(this.followUrlData)
			this.getAddressList();

			//执行频率：game（20ms/次）、ui（60ms/次）、normal（200ms/次）
			setInterval(function() {}, 60);
		},
		methods: {
			cancle() {
				this.isloading1 = false
			},
			deleteOrder() {
				this.isloading1 = true
				this.deleteShow = true
			},
			handleclose() {
				this.isloading = false
				close()
			},
			//获取订单信息
			getOrderInfo(data) {
				this.$u.get(`/app/shopOrderInfo/${data.orderId}`).then((res) => {
					this.$nextTick(() => {
						this.orderDetails = res.data;
						console.log('res.data', this.orderDetails.orderSkus);
					})
					let phone = res.data.orderInfo.mobile ? res.data.orderInfo.mobile.split("-") : ''

					//从订单页面跳转过来时，判断此订单是否有地址
					if (res.data.orderInfo.consigUser) {
						//有地址
						this.orderAddress = true;
						this.defaulAddress = {
							userName: res.data.orderInfo.consigUser,
							address: res.data.orderInfo.address,

							countryName: res.data.orderInfo.countryName,
							city: res.data.orderInfo.city,
							postalCode: res.data.orderInfo.postalCode,
							areaCode: phone[0],
							mobile: phone[1]
						};

						// console.log('aaaa',this.defaulAddress);
					}
				});
			},

			//复制
			copyText() {
				const textToCopy = this.orderDetails.orderInfo.orderNo // 替换为您要复制的文本
				let _that = this
				uni.setClipboardData({
					data: textToCopy,
					showToast: false,
					success() {
						uni.showToast({
							title: _that.$t('orderDetails.copied'),
							icon: 'none'
						});
						// this.$u.toast(this.$t('orderDetails.copied'));
					},
					fail() {
						uni.showToast({
							title: _that.$t('orderDetails.duplicationDefeat'),
							icon: 'none'
						});
					}
				});
			},



			confirm() {
				let data = {
					orderId: this.orderDetails.orderInfo.id,
				}

				this.$u.post(`/app/shopOrderInfo/delete`, data).then((r) => {
					if (r.code == 200) {
						this.deleteShow = false
						this.$u.toast(this.$t('product.deleteSuccess'));
						setTimeout((() => {
							this.isloading1 = false
							uni.reLaunch({
								url: '/pages/order/myOrder'
							})
						}), 1000);
					}
				}).catch(err => {
					console.log(err)
					this.deleteShow = false
				})

			},
			//添加至购物车
			addCar() {
				this.isloading = true
				this.orderDetails.orderSkus.forEach(item => {
					let obj = {
						skuId: item.skuId,
						num: item.num,
						taskId: item.taskId
					};

					this.$u.post('/app/cart/add', obj).then((res) => {
						if (res.code == 200) {
							this.isloading = false
						}
						this.$u.toast(this.$t('product.AddedToCart1'));

					});
				})


			},
			//取消订单
			goCancleOrder() {
				console.log(4545);
				// console.log("取消訂單",item[0]);
				let orderData = JSON.stringify(this.orderDetails);
				let newStr = orderData.replace(/%/g, '%25');

				uni.navigateTo({
					url: `/pages/order/cancleOrder?type=1&data=` + encodeURIComponent(newStr),
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			},

			changeTime() {
				let time = new Date().getTime() - this.createTime;
				if (time < 1800000) {
					this.countTime = 1800 - time / 1000;
				}
			},
			//获取商品信息
			getGoodsInfo() {
				this.$u.get(`/app/shopGoodsInfo/product/${productId}`).then((res) => {
					this.goodList = res.data;
				});
			},
			goProductDetail(item) {
				uni.navigateTo({
					url: '/pages/productDetails/productDetails?productId=' + item.id
				});
			},
			//放弃支付
			cancelPay() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			}, //返回上一页
			backEvent() {
				if (this.currentOrderDetailsType == 1 || this.pageType == 'product') {
					console.log('返回');
					this.showModel = true;
				} else {
					uni.reLaunch({
						url: '/pages/order/myOrder'
					})
				}
			},

			//倒计时结束
			timeOut() {
				uni.showToast({
					title: this.$t('orderDetails.reorder'),
					icon: 'none'
				});
			},

			//修改订单地址
			alertAddress() {
				this.$u
					.post('/app/shopOrderInfo/modifyAddress', {
						orderId: this.orderDetailsId,
						addressId: this.currentAddress.id
					})
					.then((res) => {
						this.chooseAddress = true;
					});
			},

			// 获取订单详情
			getOrderDetailsAjax() {
				// this.$u.post().then(res => {
				// 	this.orderDetails = res.data
				// })
			},
			//获取地址列表
			getAddressList() {
				this.$u
					.post('/app/user/address/page', {
						pageSize: 10000,
						pageNum: 1
					})
					.then((res) => {
						this.addressList = res.data.records;
						// 默认地址
						let address = res.data.records.filter((item) => {
							return item.defaultAddress;
						});

						if (this.pageType == 'product') {
							//默认地址不为空则赋值
							if (address.length > 0) {
								console.log(address)
								let address1 = JSON.parse(JSON.stringify(address[0]))
								this.currentAddress = JSON.parse(JSON.stringify(address[0]))
								this.defaulAddress = address1;
								this.defaulAddress.areaCode = address1.mobile.split("-")[0];
								this.defaulAddress.mobile = address1.mobile.split("-")[1];

								this.alertAddress();
							}
							console.log('defaulAddress', this.defaulAddress);
						}
					});
			},

			// 点击修改地址按钮
			changeAddressClick() {
				this.popStatusChange(true);
			},
			// 查看物流
			viewLogistics(item) {
				console.log(15555);
				this.$u.vuex('vuex_shoping_cart_log', item);
				uni.navigateTo({
					url: '/pages/orderLogistics/orderLogistics'
				});
			},
			// 弹出层状态修改
			popStatusChange(status) {
				this.changeOrderAddressPopShow = status;

				// status && (this.currentAddress = this.defaulAddress);
				console.log(7777, this.currentAddress);
			},
			// 改变地址
			changeAddress() {
				this.changeOrderAddressPopShow = false;
				if (this.currentAddress.id) {
					console.log(this.defaulAddress)
					if (!this.defaulAddress) {
						this.defaulAddress = {
							userName: '',
							address: '',

							countryName: '',
							city: '',
							postalCode: '',
							areaCode: '',
							mobile: ''
						};
						
					}
					this.defaulAddress.userName = this.currentAddress.userName;
					this.defaulAddress.consigUser = this.currentAddress.userName;
					this.defaulAddress.countryName = this.currentAddress.countryName;
					this.defaulAddress.city = this.currentAddress.city;
					this.defaulAddress.id = this.currentAddress.id;
					this.defaulAddress.addressId = this.currentAddress.id;
					this.defaulAddress.address = this.currentAddress.address;
					this.defaulAddress.postalCode = this.currentAddress.postalCode;
					this.defaulAddress.areaCode = this.currentAddress.mobile.split("-")[0];
					this.defaulAddress.mobile = this.currentAddress.mobile.split("-")[1];

					this.alertAddress();
				}
			},
			//跳转退货页面
			cardClick(data) {
				console.log(444, data);
				console.log(5555, this.orderDetails);
				this.$u.vuex('vuex_shoping_cartList', data);
				if (data.returnInfo) {
					uni.navigateTo({
						url: `/pages/order/refundProgress`,
						animationType: 'slide-in-right',
						animationDuration: 300
					});
				} else {
					// console.log(7878,this.orderDetails.orderInfo.orderStatus);

					if (data.orderStatus == 3) {
						console.log('退货、换货、退款');
						uni.navigateTo({
							url: `/pages/order/forRefund?type=0`,
							animationType: 'slide-in-right',
							animationDuration: 300
						});
					} else if (data.orderStatus == 1) {
						console.log('退款');
						uni.navigateTo({
							url: `/pages/order/forRefund?type=7`,
							animationType: 'slide-in-right',
							animationDuration: 300
						});
					} else {
						console.log('退款');
						uni.navigateTo({
							url: `/pages/order/refundProgress`,
							animationType: 'slide-in-right',
							animationDuration: 300
						});
					}
				}


			},
			// 修改选中
			currentCheckChange(item) {
				if (this.currentAddress.id !== item.id) {
					this.currentAddress = item;
					console.log(888, this.currentAddress);
				} else {
					return;
				}
			},
			// 点击付款按钮
			runPayment() {
				// 判断商品所在商店是否正常，有一个商店异常就阻止付款
				let payStatus=true
				this.orderDetails.orderSkus.forEach(item => {
					this.$u.get('/app/shop/get/'+item.shopId).then((res) => {
						if(res.data.status!=0){
							payStatus=false
						}
						
					});
				})
					if(!payStatus){
						this.$t('storeManagement.shopStatusError')
						return false
					}
					//先判断是否选择地址
					if (this.chooseAddress || this.orderAddress) {
						//判断是否设置过支付密码
						this.$u.api.verifyIsSetPwdAjax(0).then((res) => {
							console.log(11111, res);
							if (!res) {
								this.$refs.promptDialogs_cs.show({
									confirm: (close) => {
										close();
										this.$u.route('pages/modify/modify?type=1&set=0');
									},
									icon: 'errorTip',
									btnColor: '#2934d0', //按钮颜色
									btnTextType: 'Get a certificate', // 按钮文字
									des: this.$t('product.PleaseSet'),
									btnText: this.$t('product.GoToAdd')
								});
					
								return false;
							} else {
								this.isloading = true
								let time = new Date().getTime() - this.createTime;
					
								if (time < 1800000) {
									this.countTime = 1800 - time / 1000;
									this.payPwdPopShow = true;
								} else {
									uni.showToast({
										title: this.$t('orderDetails.reorder'),
										icon: 'none'
									});
								}
							}
						});
					} else {
						uni.showToast({
							title: this.$t('orderDetails.select'),
							icon: 'none'
						});
					}
			},

			// 付款组件关闭
			close() {
				console.log('关闭');
			},
			// 付款组件完成 (输入的值) : Boolean 返回状态表示是否成功或者失败
			payPwdPopFinish(value, clear) {

				let obj = {
					password: value,
					orderId: this.orderDetails.orderInfo.id
				};
				this.$u.post('/app/shopOrderInfo/pay', obj).then((res) => {
						if (res.code == 200) {
							this.isloading = false
						}
						this.$u.route('/pages/paymentCancel/paymentCancel', {
							type: 0
						});

					},
					(err) => {
						// console.log(557575,err.data.code);
						if (err.data.code === 50006) {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/recharge/recharge'
								})
							}, 2000)
						}


					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.order-details-container {
		height: 100vh;
		font-family: PingFang SC;

		.container-box {
			background-color: #f7f8fa;
			position: relative;
			padding-left: 0;
			padding-right: 0;
			height: 98%;

			.order-box {
				height: calc(100% - 202rpx);
				background-color: #f7f8fa;
				;
				overflow-y: auto;
				overflow-x: visible;

				&.is-shipped {
					height: fit-content;
				}

				>view {
					padding: 0 30rpx;
					margin: 0 30rpx;
				}

				.payDetail {
					border-radius: 16rpx;
					// border: 2rpx solid #e1e8e8;
					background-color: #fff;
				}

				.address-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: relative;
					height: 248rpx;
					border-radius: 16rpx;
					// border: 2rpx solid #e1e8e8;
					margin-bottom: 16rpx;
					background-color: #fff;
					padding: 0 20rpx;

					>.info {
						width: 80%;

						.name {
							color: #212121;
							font-size: 30rpx;
							font-weight: 500;
						}

						&> :not(.name) {
							color: #1e2432;
							line-height: 40rpx;
							font-size: 26rpx;
						}

						.dressMsg {
							color: #b6b6b6;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
						}

						.name,
						.dressMsg {
							width: 100%;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}

					>.btn-area {
						display: flex;
						align-items: center;

						button {
							width: 180rpx;
							height: 48rpx;
							line-height: 48rpx;
							font-size: 24rpx;
							border-radius: 12rpx;
							margin: 0;
							margin-top: 22rpx;
							padding: 0;

							&[type='default']:not([plain]):not(.button-hover) {
								background: #2934d0;
							}

							&[plain] {
								border-color: #2934d0;

								&:not(.button-hover) {
									color: #2934d0;
								}
							}
						}
					}
				}

				.goods-list {
					position: relative;

					>.goods-item {
						padding: 28rpx 0;

						&:first-child {
							position: relative;

							// &::after {
							// 	position: absolute;
							// 	content: '';
							// 	width: 100%;
							// 	height: 2rpx;
							// 	background-color: #e1e8e8;
							// 	bottom: 0;
							// }
						}
					}
				}

				.price-details {
					padding: 28rpx 0;

					.price-details-title {
						>h2 {
							font-size: 30rpx;
							font-weight: 500;
							color: #212121;
						}

						>text {
							color: #b6b6b6;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
						}
					}

					.price-list {
						padding-bottom: 20rpx;
						border-bottom: 2rpx solid #f2f3f5;

						ul {
							li {
								font-size: 26rpx;
								display: flex;
								justify-content: space-between;
								margin-top: 10rpx;
							}
						}
					}

					.price-result {
						display: flex;
						justify-content: space-between;
						color: #212121;
						font-size: 26rpx;
						font-weight: 500;
						margin-top: 20rpx;
						margin-bottom: 30rpx;
					}
				}
			}
		}

		.footer-pay {
			width: 100%;
			height: 202rpx;
			background-color: #1e2432;
			display: flex;
			padding: 50rpx 44rpx 0 50rpx;
			justify-content: space-between;
			position: fixed;
			bottom: 0;

			.total {
				line-height: 58rpx;

				>view:nth-child(1) {
					color: #91909a;
				}

				>view:nth-child(2) {
					color: #fff;
					font-size: 40rpx;
				}
			}

			>button {
				margin: 0;
				width: 380rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 20rpx;
			}
		}

		.change-order-address {
			.popup-main {
				padding: 56rpx 40rpx;

				.header {
					padding: 0 10rpx;
					display: flex;
					justify-content: space-between;
					font-size: 30rpx;

					>text {
						color: #212121;
						font-weight: 500;
					}
				}

				.check-address {
					margin-top: 50rpx;

					.address-item {
						display: flex;
						margin-bottom: 68rpx;

						.check-text {
							width: 0;
							flex: auto;
							color: #1e2432;

							.user-name {
								font-size: 30rpx;
								line-height: 36rpx;
								font-weight: 500;
							}

							.address {
								margin-top: 6rpx;
								font-size: 26rpx;
								line-height: 40rpx;
							}
						}

						.check-icon {
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
							border: 4rpx solid #212121;
							margin-right: 28rpx;
							margin-top: 8rpx;
							position: relative;

							&.is-checked::after {
								content: '';
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
								width: 70%;
								height: 70%;
								border-radius: 50%;
								background-color: #212121;
							}
						}
					}
				}
			}
		}
	}

	// 推荐列表
	.goods-box {
		margin-bottom: 260rpx !important;

		.title {
			display: flex;
			justify-content: space-between;
			color: #000;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 48rpx;
			margin: 40rpx 40rpx 32rpx 0;
		}

		.reviews-main {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.product-card-container {
				width: 45%;
			}
		}
	}

	.countDown {
		color: #1b1d29;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		margin: 20rpx 0 10rpx;
		display: flex;
		justify-content: center;
	}

	/deep/.pay-pwd-pop .popup-main .header>uni-text[data-v-2eea0bb8] {
		color: #b6b6b6;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
	}

	/deep/.img-box[data-v-52f5b378] {
		width: 280rpx;
		height: 280rpx;
		overflow: hidden;
		border-radius: 26rpx;
	}

	.goodStatus-box {
		mix-blend-mode: normal;
		color: #212121;
		font-family: Helvetica-Helvetica;
		font-size: 40rpx;
		margin-bottom: 20rpx;
	}

	.goodStatus-msg {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0;
		color: #616161;
		font-family: Helvetica-Helvetica;
		font-size: 24rpx;
		flex-wrap: wrap;

		view {
			text-wrap: nowrap;
		}
	}

	.bottom-btn {
		width: 290rpx;
		height: 100rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btnType {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.btnType1 {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
	}

	.bottom-cancle {
		width: 240rpx;
		height: 100rpx;
		mix-blend-mode: normal;
		border-radius: 20rpx;
		border: 2rpx solid #ffffff;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;

		.bottom-text {
			color: #ffffff;
			font-size: 28rpx;
		}
	}
</style>